<script setup lang="ts">
import lightAnimationData from '@/assets/lottie/menu/light/subMenuUniqueOpened.json';
import darkAnimationData from '@/assets/lottie/menu/dark/subMenuUniqueOpened.json';
/* =============================================
=               Vue SFC Options 配置           =
============================================= */
defineOptions({
  name: 'OtherPageDetail',
});
/* =============================================
=                   逻辑代码                   =
============================================= */

const AnimRef = ref<HTMLElement | null>(null);

const { play, stop } = useLottie(
  AnimRef,
  {
    lightAnimationData,
    darkAnimationData,
  },
);
</script>

<template>
  <PubPageMain>
    <div
      bg-red
      w-500px
      h-500px
      @mouseenter="play"
      @mouseleave="stop"
    >
      <div ref="AnimRef" w-400px />
    </div>
  </PubPageMain>
</template>
